<template>
  <el-container class="msgbox-fade-enter-active">
    <!--头部-->
    <el-header class="header">
      <span :value="titleList.value">{{ titleList.titel_head }}</span>
    </el-header>
    <!--公共内容-->
    <el-main>
      <!--模块选择-->
      <span :value="titleList.value">{{ titleList.titel_module }}：</span>
      <el-select v-model="finalValue"
                 value-key="id"
                 class="opt"
                 filterable
                 allow-create
                 default-first-option
                 >
        <el-option
            v-for="(item,index) in arrList"
            :value="item.value"
            :key="index"
        >{{ item.name }}
        </el-option>
        <!--        <span v-show="modulesshow==='true'">名称：<el-input v-model="arrList[index]" style="width: 25%"/></span>-->
        <!--        <span v-show="modulesshow==='true'">code：<el-input v-model="item.name" style="width: 25%"/></span>-->
      </el-select>
      <el-button @click="modules"><span>确定</span></el-button>
      <!--<el-button @click="addmodules"><span>增加模块</span></el-button>-->
      <!--<el-button @click="upmodules"><span>修改模块名称</span></el-button>-->
      <el-divider></el-divider>
      <!--<el-button @click="xiugai" style="width: 8rem"><span>修改属性名称</span></el-button>-->
    </el-main>
    <!--设置的数据内容-->
    <el-main>
      <!--表单-->
      <el-form v-for="(item, idx) in dataList"
               :data="dataList"
               ref="dataList"
               :key="'info2-'+idx"
      >
        <el-form-item
            :label=item.title
            :prop="item.stype"
        >
          <!--根据stype是否等于table，显示输入框或表格-->
          <span v-show="show==='true'">名称：<el-input v-model="item.title" style="width: 25%"/></span>
          <!--<span v-show="show==='false'">{{ item.title }}：</span>-->
          <span v-show="show==='true'">code：<el-input v-model="item.code" style="width: 25%"/></span>
          <el-input v-show="item.stype!=='table'" v-model="item.value" style="width: 10%"/>
          <!--表格-->
          <el-button
              v-show="item.stype==='table'"
              type="primary" icon="el-icon-edit"
              size="small"
              @click="handleEdit2('', '', '')">
            <span>修改选中样式</span>
          </el-button>
          <el-table
              v-show="item.stype==='table'"
              :data="item.columns"
              @selection-change="handleSelectionChange"
              height="20rem"
              style="width: 100%">
            <el-table-column
                type="selection"
                width="50rem">
            </el-table-column>
            <el-table-column
                v-for="(item,index) in table_titelList"
                :key="index"
                :prop="item.field"
                :label="item.title"
                width="170rem"
            >
              <template slot-scope="scope">
                <el-input v-if="tableShow==='input'
                      &&item.field!=='Style'
                      &&item.field!=='HeadStyle'
                      &&item.field!=='RowStyle'"
                          v-model="scope.row[scope.column.property]" @blur="blurshow"></el-input>
                <span v-else-if="tableShow==='span'"
                      style="margin-left: 10px"
                      @click="blurshow">{{ scope.row[scope.column.property] }}</span>
                <el-button v-else-if="tableShow==='input'
                       &&item.field.match(/Style/i)"
                           v-model="scope.row[scope.column.property]"
                           @click="handleEdit2(scope.$index, scope.row,item.field)"
                >修改{{ item.title }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200rem">
              <template slot-scope="scope">
                <el-button
                    type="primary" icon="el-icon-edit"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                    @click.native.prevent="deleteRow(scope.$index, item.columns)"
                    type="danger" icon="el-icon-delete"
                    size="mini">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

      </el-form>
      <!--编辑全部数据表单-->
      <el-dialog
          title="编辑"
          :visible.sync="editFormVisible"
          width="50vw"
      >
        <el-form label-width="80px" :model="upList">
          <el-form-item label="名称">
            <el-input v-model="upList.Name"></el-input>
          </el-form-item>
          <el-form-item label="code">
            <el-input v-model="upList.value"></el-input>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input v-model="upList.Width"></el-input>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input v-model="upList.FontSize"></el-input>
          </el-form-item>
          <el-form-item label="样式">
            <el-input v-model="upList.Style"></el-input>
          </el-form-item>
          <el-form-item label="头部样式">
            <el-input v-model="upList.HeadStyle"></el-input>
          </el-form-item>
          <el-form-item label="行样式">
            <el-input v-model="upList.RowStyle"></el-input>
          </el-form-item>
          <el-form-item label="格式化">
            <el-input v-model="upList.DataFormat"></el-input>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <!--自定义style-->
        <span>
        <span>水平位置：</span>
         <el-select v-model="textStyle"
                    clearable
                    filterable placeholder="请选择样式"
                    style="width: 120px">
          <el-option
              v-for="item in textList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
         </el-option>
        </el-select>
          <span>垂直位置：</span>
         <el-select v-model="verticalStyle"
                    clearable
                    filterable placeholder="请选择样式"
                    style="width: 120px">
          <el-option
              v-for="item in verticalList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
         </el-option>
        </el-select>
        <span>颜色</span>：<el-color-picker v-model="colors" size="small"></el-color-picker>
        <span>背景颜色：</span><el-color-picker v-model="backgrounds" size="small"></el-color-picker>
          <br>
          <span>字体大小：</span><el-input v-model="fontSizes" style="width: 120px"></el-input>
          <span>字体加粗：</span><el-input v-model="fontWeights" style="width: 120px"></el-input>
          <br>
          <span>行高：</span><el-input v-model="lineHeights" style="width: 120px"></el-input>
          <span>宽度：</span><el-input v-model="Widths" style="width: 120px"></el-input>
          <span>高度：</span><el-input v-model="Heights" style="width: 120px"></el-input>
      </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="Clear">清除全部</el-button>
        <el-button @click="cancel(1)">关闭编辑</el-button>
        <el-button @click="ok(1)">保存样式</el-button>
        <el-button @click="ok(2)">保存头部样式</el-button>
        <el-button @click="ok(3)">保存行样式</el-button>
      </span>
      </el-dialog>
      <!--编辑样式表单-->
      <el-dialog
          title="编辑"
          :visible.sync="editFormVisible2"
          width="50vw">
        <span>
        <span>水平位置：</span>
        <el-select v-model="textStyle"
                   clearable
                   filterable placeholder="请选择样式"
                   style="width: 120px">
          <el-option
              v-for="item in textList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <span>垂直位置：</span>
        <el-select v-model="verticalStyle"
                   clearable
                   filterable placeholder="请选择样式"
                   style="width: 120px">
          <el-option
              v-for="item in verticalList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <span>颜色</span>：
        <el-color-picker v-model="colors" size="small"></el-color-picker>
        <span>背景颜色：</span>
        <el-color-picker v-model="backgrounds" size="small"></el-color-picker>
        <br>
        <span>字体大小：</span>
        <el-input v-model="fontSizes" style="width: 120px"></el-input>
        <span>字体加粗：</span>
        <el-input v-model="fontWeights" style="width: 120px"></el-input>
          <br>
        <span>行高：</span>
        <el-input v-model="lineHeights" style="width: 120px"></el-input>
        <span>宽度：</span>
        <el-input v-model="Widths" style="width: 120px"></el-input>
        <span>高度：</span>
        <el-input v-model="Heights" style="width: 120px"></el-input>
        </span>

        <span slot="footer" class="dialog-footer">
        <el-button @click="Clear">清除设置样式</el-button>
        <el-button @click="cancel(2)">关闭编辑</el-button>
        <el-button v-show="editFormVisible3==='true'" @click="ok(4)">保存样式</el-button>
        <el-button v-show="editFormVisible3==='true'" @click="ok(5)">保存头部样式</el-button>
        <el-button v-show="editFormVisible3==='true'" @click="ok(6)">保存行样式</el-button>
        <el-button v-show="editFormVisible3==='Style'" @click="ok(1)">保存样式</el-button>
        <el-button v-show="editFormVisible3==='HeadStyle'" @click="ok(2)">保存头部样式</el-button>
        <el-button v-show="editFormVisible3==='RowStyle'" @click="ok(3)">保存行样式</el-button>
      </span>
      </el-dialog>
    </el-main>
    <div style="text-align: center;">
      <el-button type="primary" @click="tijiao" round style="width: 5rem">保存</el-button>
    </div>
  </el-container>

</template>

<script>
let _index;
export default {
  name: 'app',
  data() {
    return {
      editFormVisible: false,//表单1隐藏
      editFormVisible2: false,//表单2隐藏
      editFormVisible3: 'true',//表单2按钮隐藏
      tableShow: 'span',//表格显示
      show: 'false',//title名称隐藏
      modulesshow: 'false',//模块修改input隐藏
      finalValue: '',//模块选择（联动）
      Module:'',//点击确定后的模块
      fontValue: '思源黑体',//字体默认值
      dataList: [],//模块全部数据
      tableList: [],//1.表格数据
      dataLists: [],//2.字段数据
      multipleSelection: '',//多选框选中数据
      upList: [],//放入表单内数据
      upList2: '',//单个放入表单内数据
      fontList: {}, // 字体列表
      arrList: {},// 模块列表

      //公共内容titel
      titleList: {
        titel_head: '配置页面',
        titel_module: '请选择模块',
        titel_sizi: '字体设置',
      },

      //动态生成表格头部
      table_titelList: [
        {field: 'Name', title: '名称', width: 120, editRender: {name: 'input'}},
        {field: 'value', title: 'value', width: 180, editRender: {name: 'input'}},
        {field: 'Width', title: '宽度', width: 120, editRender: {name: 'input'}},
        {field: 'FontSize', title: '字体大小', width: 120, editRender: {name: 'input'}},
        {
          field: 'Style',
          title: '样式',
          width: 200,
          editRender: {name: '$select', options: this.typeList, props: {clearable: true}},
        },
        {
          field: 'HeadStyle',
          title: '头部样式',
          width: 200,
          editRender: {name: '$select', options: this.textList, props: {clearable: true}}
        },
        {
          field: 'RowStyle',
          title: '行样式',
          width: 200,
          editRender: {name: '$select', options: this.textList, props: {clearable: true}}
        },
        {
          field: 'DataFormat',
          title: '格式化',
          width: 200,
          editRender: {name: '$input'}
        },
      ],
      /*
      编辑表格内数据
       */
      textStyle: '',//水平位置绑定数据
      verticalStyle: '',//垂直位置绑定数据
      colors: '',//颜色
      backgrounds: '',//背景颜色
      fontSizes: '',//字体大小
      fontWeights: '',//字体加粗
      lineHeights: '',//行高
      Widths: '',//宽度
      Heights: '',//高度
      textList: [
        {value: '', label: '无'},
        {value: '水平位置:居中;', label: '居中'},
        {value: '水平位置:居左;', label: '居左'},
        {value: '水平位置:居右;', label: '居右'},
      ],
      verticalList: [
        {value: '', label: '无'},
        {value: '垂直位置:居中;', label: '居中'},
        {value: '垂直位置:居左;', label: '居左'},
        {value: '垂直位置:居右;', label: '居右'},
      ],
    };
  },
  methods: {
    //表格文本切换
    blurshow() {
      if (this.tableShow === 'span') {
        this.tableShow = 'input';
      } else {
        this.tableShow = 'span';
      }
    },
    //取消，隐藏
    cancel(s) {
      if (s === 1) {
        this.editFormVisible = false;
      } else {
        this.editFormVisible2 = false;
      }
    },
    //点击编辑
    handleEdit(index, row) {
      this.Clear();
      this.editFormVisible = true;
      this.upList = row;
      _index = index;
    },
    //点击修改全部样式和单个表格样式
    handleEdit2(index, row, val) {
      /*
      index 标识
      row 数据
      val 用来判断点击那个按钮
       */
      this.Clear();
      this.editFormVisible2 = true;//表单显示
      // 根据点击按钮，按钮显示
      if (val === '' && index === '') {
        this.editFormVisible3 = 'true';
      } else if (val === 'Style') {
        this.editFormVisible3 = 'Style';
      } else if (val === 'HeadStyle') {
        this.editFormVisible3 = 'HeadStyle';
      } else if (val === 'RowStyle') {
        this.editFormVisible3 = 'RowStyle';
      }
      //根据传参，判断点击的单个数据修改按钮，还是多选修改按钮
      //1.修改单个数据时
      if (index != null && index !== ''
          && row != null && row !== ''
          && val != null && val !== '') {
        let strings = '';//用来接收样式的字符串数据
        //根据val传参判断修改的样式
        if (val === 'Style') {
          if (row.Style !== '' || row.Style != null) {
            strings = row.Style
          }
        } else if (val === 'HeadStyle') {
          if (row.HeadStyle !== '' || row.HeadStyle != null) {
            strings = row.HeadStyle
          }
        } else if (val === 'RowStyle') {
          if (row.RowStyle !== '' || row.RowStyle != null) {
            strings = row.RowStyle
          }
        }
        //样式数据不为空时：拆分字符串，将数据一一放入表单
        if (strings !== '') {
          let cut = strings.split(";")
          let cut2 = '';
          let cut3 = '';
          for (let i = 0; i < cut.length; i++) {
            cut2 = cut[i];
            cut3 = cut2.split(":");
            if (cut3[0] === "水平位置") {
              if (cut3[1] !== null && cut3[1] !== '') {
                this.textStyle = "水平位置:" + cut3[1] + ";"
              } else {
                this.textStyle = ''
              }
            } else if (cut3[0] === "垂直位置") {
              if (cut3[1] !== null && cut3[1] !== '') {
                this.verticalStyle = "垂直位置:" + cut3[1] + ";"
              } else {
                this.verticalStyle = ''
              }
            } else if (cut3[0] === "颜色") {
              if (cut3[1] !== null && cut3[1] !== '') {
                this.colors = cut3[1]
              } else {
                this.colors = ''
              }
            } else if (cut3[0] === "背景颜色") {
              if (cut3[1] !== null && cut3[1] !== '') {
                this.backgrounds = cut3[1]
              } else {
                this.backgrounds = ''
              }
            } else if (cut3[0] === "字体大小") {
              if (cut3[1] !== null && cut3[1] !== '') {
                this.fontSizes = cut3[1]
              } else {
                this.fontSizes = ''
              }
            } else if (cut3[0] === "字体加粗") {
              if (cut3[1] !== null && cut3[1] !== '') {
                this.fontWeights = cut3[1]
              } else {
                this.fontWeights = ''
              }
            } else if (cut3[0] === "行高") {
              if (cut3[1] !== null && cut3[1] !== '') {
                this.lineHeights = cut3[1]
              } else {
                this.lineHeights = ''
              }
            } else if (cut3[0] === "宽度") {
              if (cut3[1] !== null && cut3[1] !== '') {
                this.Widths = cut3[1]
              } else {
                this.Widths = ''
              }
            } else if (cut3[0] === "高度") {
              if (cut3[1] !== null && cut3[1] !== '') {
                this.Heights = cut3[1]
              } else {
                this.Heights = ''
              }
            }
          }
        }
      }
      //2.多选框数据
      this.upList.push(row);
    },
    // 保存样式
    ok: function (s) {
      var sty = '';//样式
      var colers = '';//颜色
      var fontSizes = '';//
      var backgrounds = '';
      var fontWeights = '';
      var lineHeights = '';
      var Widths = '';
      var Heights = '';
      if (this.colors != null && this.colors !== '') {
        colers = 'color:' + this.colors + ';';
      }
      if (this.backgrounds != null && this.backgrounds !== '') {
        backgrounds = 'background:' + this.backgrounds + ';';
      }
      if (this.fontSizes != null && this.fontSizes !== '') {
        fontSizes = 'font-Size:' + this.fontSizes + ';';
      }
      if (this.fontWeights != null && this.fontWeights !== '') {
        fontWeights = 'font-weight:' + this.fontWeights + ';';
      }
      if (this.lineHeights != null && this.lineHeights !== '') {
        lineHeights = 'line-height:' + this.lineHeights + ';';
      }
      if (this.Widths != null && this.Widths !== '') {
        Widths = 'width:' + this.Widths + ';';
      }
      if (this.Heights != null && this.Heights !== '') {
        Heights = 'height:' + this.Heights + ';';
      }
      sty = this.textStyle + this.verticalStyle + colers + backgrounds + fontSizes + fontWeights + lineHeights + Widths + Heights
      //将代码变为中文
      let zhengze = sty
          .replace(/text-align/i, '水平位置')
          .replace(/vertical-align/i, '垂直位置')
          .replace(/center/i, '居中')
          .replace(/left/i, '居左')
          .replace(/right/i, `居右`)
          .replace(/color/i, `颜色`)
          .replace(/background/i, '背景颜色')
          .replace(/font-weight/i, '字体加粗')
          .replace(/Font-Size/i, '字体大小')
          .replace(/line-height/i, '行高')
          .replace(/Width/i, '宽度')
          .replace(/height/i, '高度');
      if (s === 1) {
        this.upList.Style = zhengze;
      } else if (s === 2) {
        this.upList.HeadStyle = zhengze;
      } else if (s === 3) {
        this.upList.RowStyle = zhengze;
      } else if (s === 4) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.multipleSelection[i].Style = zhengze;
        }
      } else if (s === 5) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.multipleSelection[i].HeadStyle = zhengze;
        }
      } else if (s === 6) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.multipleSelection[i].RowStyle = zhengze;
        }
      }
    },
    //点击删除
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //多选获取数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //修改title名称按钮
    xiugai() {
      if (this.show === 'true') {
        this.show = 'false';
      } else {
        this.show = 'true';
      }
    },
    //增加模块
    addmodules() {
      let shu = this.arrList.length;
      if (0 <= shu <= 97) {
        this.arrList.push({value: "_user._0" + (shu + 2), name: "模块" + (shu + 1)})
        alert("模块增加成功")
      } else if (shu > 97) {
        this.arrList.push({value: "_user._" + (shu + 2), name: "模块" + (shu + 1)})
        alert("模块增加成功")
      }
    },
    //增加行
    addCol() {
      this.dataList.push({code: "title_fontSize", stype: "text", title: "新增", value: "25"})
    },
    //增加表格
    addtable() {
      this.dataList.push({
        code: "tableList3", stype: "table", title: "新增表格", columns: [
          {
            Name: "新增",
            stype: "text",
            value: "samplebarCodeNo",
            Width: "20%",
            FontSize: "4.2rem",
            Style: "text-align:center;color: #ffffff",
            HeadStyle: "",
            RowStyle: "",
            _XID: "row_18"
          }, {
            Name: "新增",
            stype: "text",
            value: "samplebarCodeNo",
            Width: "21%",
            FontSize: "4.3rem",
            Style: "text-align:center;color: #ffffff",
            HeadStyle: "",
            RowStyle: "",
            _XID: "row_19"
          }, {
            Name: "新增",
            stype: "text",
            value: "samplebarCodeNo",
            Width: "20%",
            FontSize: "4.2rem",
            Style: "text-align:center;color: #ffffff",
            HeadStyle: "s",
            RowStyle: "d",
            _XID: "row_20"
          }, {
            Name: "新增",
            stype: "text",
            value: "samplebarCodeNo",
            Width: "20%",
            FontSize: "4.2rem",
            Style: "text-align:center;color: #ffffff",
            HeadStyle: "",
            RowStyle: "",
            _XID: "row_21"
          }
        ]
      })
    },
    //每次改变显示的模块和名称
    changeTest(name) {
      let obj = {};
      obj = this.arrList.find((item) => { // 这里的testOptions就是上面遍历的测试源
        return item.value === name;// 筛选出匹配数据
      });
      console.log('模块名称', obj)
    },
    //修改title名称按钮
    upmodules() {
      console.log(this.arrList[0].value)
      if (this.modulesshow === 'true') {
        this.modulesshow = 'false';
      } else {
        this.modulesshow = 'true';
      }
    },
    //清除表单样式
    Clear() {
      this.upList = [];
      this.textStyle = '';
      this.verticalStyle = '';
      this.backgrounds = '';
      this.colors = '';
      this.fontSizes = '';//字体大小
      this.fontWeights = '';//字体加粗
      this.lineHeights = '';//行高
      this.Widths = '';//宽度
      this.Heights = '';//高度
    },
    //确定模块按钮
    modules() {
      this.dataLists = [];
      this.tableList = [];
      this.dataList = [];
      this.Module=this.finalValue
      this.godata()
    },
    //保存生成按钮
    tijiao() {
      if(this.Module!==this.finalValue){
        this.$message({
          showClose: true,
          center: true,
          message: '模块选择改变后，请先点击确定',
          type: 'warning'
        });
      }else if(this.dataList.length === 0){
        this.$message({
          showClose: true,
          center: true,
          message: '数据为空不能保存',
          type: 'error'
        });
      }else {
        //修改的数据
        let dataList = this.dataList;//模块数据
        let mokuai = this.finalValue;//模块
        let fontValue = this.fontValue;//字体设置
        let arrList = this.arrList;//总模块title设置
        let arrListSize = this.arrList.length;//总模块title设置
        let fontList = this.fontList;//字体title设置
        for (let i = 0; i < dataList.length;) {
          if (dataList[i].stype === 'table') {
            for (let a = 0; a < dataList[i].columns.length; a++) {
              dataList[i].columns[a].Style = dataList[i].columns[a].Style
                  .replace(/水平位置/g, 'text-align')
                  .replace(/垂直位置/g, 'vertical-align')
                  .replace(/居中/g, 'center')
                  .replace(/居左/g, 'left')
                  .replace(/居右/g, 'right')
                  .replace(/颜色/g, 'color')
                  .replace(/背景颜色/g, 'background')
                  .replace(/字体加粗/g, 'font-weight')
                  .replace(/字体大小/g, 'FontSize')
                  .replace(/行高/g, 'line-height')
                  .replace(/宽度/g, 'Width')
                  .replace(/高度/g, 'height')
              dataList[i].columns[a].HeadStyle = dataList[i].columns[a].HeadStyle
                  .replace(/水平位置/g, 'text-align')
                  .replace(/垂直位置/g, 'vertical-align')
                  .replace(/居中/g, 'center')
                  .replace(/居左/g, 'left')
                  .replace(/居右/g, 'right')
                  .replace(/颜色/g, 'color')
                  .replace(/背景颜色/g, 'background')
                  .replace(/字体加粗/g, 'font-weight')
                  .replace(/字体大小/g, 'FontSize')
                  .replace(/行高/g, 'line-height')
                  .replace(/宽度/g, 'Width')
                  .replace(/高度/g, 'height')
              dataList[i].columns[a].RowStyle = dataList[i].columns[a].RowStyle
                  .replace(/水平位置/g, 'text-align')
                  .replace(/垂直位置/g, 'vertical-align')
                  .replace(/居中/g, 'center')
                  .replace(/居左/g, 'left')
                  .replace(/居右/g, 'right')
                  .replace(/颜色/g, 'color')
                  .replace(/背景颜色/g, 'background')
                  .replace(/字体加粗/g, 'font-weight')
                  .replace(/字体大小/g, 'FontSize')
                  .replace(/行高/g, 'line-height')
                  .replace(/宽度/g, 'Width')
                  .replace(/高度/g, 'height')
            }
          }
          i++;
        }
        var list2 = {mokuai, dataList, fontValue, arrList, arrListSize, fontList};
        console.log('提交数据：', list2);
        if (mokuai === '' || mokuai == null) {
          alert("请先选择模块")
        } else {
          this.$axios({
            url: this.baseURL+'/tijiao',
            method: 'post',
            data: list2,
            header: {
              'Content-Type': 'application/json',  //如果写成contentType会报错
              // }
            }
          }).then(res => {
            this.$message({
              showClose: true,
              center: true,
              message: '修改成功',
              type: 'success'
            });
            console.log('res=>', res);
          }).catch(function (error) {
            this.$message({
              showClose: true,
              center: true,
              message: '修改失败',
              type: 'warning'
            });
            console.log(error)
          });
        }
      }
    },
    //调取js模块数据
    godata() {
      this.$axios({
        url: this.baseURL+'/data',
        method: 'get',
        params: {
          'mokuai': this.finalValue
        }
      }).then(data => {
        this.dataList = data.data;
        console.log(this.finalValue + '模块数据↓ ↓ ↓')
        console.log(data.data)
        for (let i = 0; i < this.dataList.length;) {
          if (this.dataList[i].stype === 'table') {
            //每次获取到数据，将样式代码转为中文
            for (var s = 0; s < this.dataList[i].columns.length; s++) {
              if (this.dataList[i].columns[s].Style !== undefined
                  && this.dataList[i].columns[s].Style !== null
              ) {
                this.dataList[i].columns[s].Style = this.dataList[i].columns[s].Style
                    .replace(/text-align/i, '水平位置')
                    .replace(/vertical-align/i, '垂直位置')
                    .replace(/center/i, '居中')
                    .replace(/left/i, '居左')
                    .replace(/right/i, '居右')
                    .replace(/color/i, '颜色')
                    .replace(/background/i, '背景颜色')
                    .replace(/font-weight/i, '字体加粗')
                    .replace(/FontSize/i, '字体大小')
                    .replace(/line-height/i, '行高')
                    .replace(/Width/i, '宽度')
                    .replace(/height/i, '高度')
              } else {
                this.dataList[i].columns[s].Style = '';
              }

              if (this.dataList[i].columns[s].HeadStyle !== undefined
                  && this.dataList[i].columns[s].HeadStyle !== null
              ) {
                this.dataList[i].columns[s].HeadStyle = this.dataList[i].columns[s].HeadStyle
                    .replace(/text-align/i, '水平位置')
                    .replace(/vertical-align/i, '垂直位置')
                    .replace(/center/i, '居中')
                    .replace(/left/i, '居左')
                    .replace(/right/i, '居右')
                    .replace(/color/i, '颜色')
                    .replace(/background/i, '背景颜色')
                    .replace(/font-weight/i, '字体加粗')
                    .replace(/FontSize/i, '字体大小')
                    .replace(/line-height/i, '行高')
                    .replace(/Width/i, '宽度')
                    .replace(/height/i, '高度')
              } else {
                this.dataList[i].columns[s].HeadStyle = '';
              }

              if (this.dataList[i].columns[s].RowStyle !== undefined
                  && this.dataList[i].columns[s].RowStyle !== null
              ) {
                this.dataList[i].columns[s].RowStyle = this.dataList[i].columns[s].RowStyle
                    .replace(/text-align/i, '水平位置')
                    .replace(/vertical-align/i, '垂直位置')
                    .replace(/center/i, '居中')
                    .replace(/left/i, '居左')
                    .replace(/right/i, '居右')
                    .replace(/color/i, '颜色')
                    .replace(/background/i, '背景颜色')
                    .replace(/font-weight/i, '字体加粗')
                    .replace(/FontSize/i, '字体大小')
                    .replace(/line-height/i, '行高')
                    .replace(/Width/i, '宽度')
                    .replace(/height/i, '高度')
              } else {
                this.dataList[i].columns[s].RowStyle = '';
              }
              //添加id值
              // console.log(this.dataList[i].columns[s].ids = ids);
              // ids++;
            }
            this.tableList.push(this.dataList[i].columns)
          } else {
            this.dataLists.push(this.dataList[i])
          }
          i++;
        }
      })

    }
  },
  mounted() {
    //每次先获取列表信息
    this.$axios({
      url: this.baseURL+'/list',
      method: 'get',
    }).then(data => {
      this.arrList = data.data[0];
      this.fontList = data.data[1];
    })
  }
}
</script>
<style>
/*头部*/
.header {
  font-size: 2.5rem;
  text-align: center;
  color: beige;
  height: 20vh;
  background-color: #878b8b;
}

/*下拉菜单*/
.opt {
  border: 2rem;
}

</style>
